<template>
  <div id="app"> <!-- :style="{'height': divHeight+'px'}" -->
  <!-- <div class="title">指标核对小助手</div> -->
    <!-- <div class="title">W.IN</div>
    <w-scrollbar wrap-class="scrollbar-wrapper">
      <w-menu :default-actived="active" :router="true" mode="vertical" theme="light" @select="handleSelectChange">
        <w-menu-item v-for="(item,i) in navList" :key="i" :index="String(i)" :route="item.name">
          <template slot="title">
            <i class="w-icon-s-platform"></i>
            <span> {{ item.navItem }}</span>
          </template>
        </w-menu-item>
      </w-menu>
    </w-scrollbar>
    <p class="item-title" v-if="navList[active].navItem!='指标数据核对'">{{navList[active].navItem}}</p> -->
    <router-view />
  </div>
</template>

<script>
  import {
    getScrollTop
  } from '@/utils/index.js'
  export default {
    name: "App",
    data() {
      return {
        active: '',
        navList: [{
            name: '/zbIndex',
            navItem: '数据处理过程管理'
          },
          {
            name: '/indicatorList',
            navItem: '指标校验规则管理'
          },
          {
            name: '/indexVerify',
            navItem: '指标数据校验结果'
          },
          {
            name: '/dataDetail',
            navItem: '指标数据核对管理'
          },
          {
            name: '/indicatorCheck',
            navItem: '指标数据核对'
          },
          // {
          //   name: 'indexSearch',
          //   navItem: '指标检索'
          // },
          // {
          //   name: 'modelSearch',
          //   navItem: '模型知识检索'
          // }
        ],
        divHeight: document.body.scrollHeight + document.body.scrollTop,
      }
    },
    created() {
      // this.active = this.navList[0].name
      this.navList.map((item, index) => {
        if (this.$route.path.indexOf(item.name) != -1) {
          this.active = String(index)
        }
      })
    },
    methods: {
      handleSelectChange(val) {
        console.log('val',val)
        this.active = val
      }
    }
  }
</script>

<style>
  #app {
    background-color: rgba(236, 239, 247);
  }

  body {
    margin: 0;
    padding: 0;
    background-color: rgba(236, 239, 247);
  }

  body .el-table th.gutter {
    display: table-cell !important;
  }

  body .el-table colgroup.gutter {
    display: table-cell !important;
  }

  .title {
    width: 100%;
    height: 50px;
    line-height: 50px;
    background: #144FEC;
    color: white;
    padding-left: 25px;
    font-size: 20px;
    box-sizing: border-box;
  }

  .item-title {
    width: calc(100% - 220px);
    float: right;
    background: rgba(236, 239, 247);
    padding: 10px 0;
    box-sizing: border-box;
    color: #666666;
  }
</style>
